<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.getElementById("box"),
                // divs = document.getElementsByTagName('div'),
                divs = box.getElementsByTagName('div'),
                len = 110,
                str = '';
                for(var i = 0; i<len; i++){
                    //' + Math.floor(i/10)*55 + '
                    //'  + i%10*55 +  '
                    //' + (-i%10*55) +  '
                    // ' + (-Math.floor(i/10)*55) +  '
                    str += '<div style="opacity:0.2;transition: 0.5s;width:50px;height:50px;position:absolute;top:' + Math.floor(i/10)*52 + 'px;left:'+ i%10*52 +  'px; background:url(img/pic.jpg)' + (-i%10*52) +  'px ' + (-Math.floor(i/10)*52) +  'px "></div>';
                }
                box.innerHTML = str;
                for(var i = 0; i < divs.length; i++){
                    divs[i].onmouseenter = function(){
                        this.style.opacity = 1;
                        //缩放
                        this.style.transform = 'scale(1.5)';
                    }
                    divs[i].onmouseout = function(){
                        this.style.transform = 'scale(1)';
                    }
                }
        }
      
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>